<template>
	<div>
		<div class="head">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>已经购买商品管理</el-breadcrumb-item>
			</el-breadcrumb>
			<el-button type="info" @click="logout">退出</el-button>
		</div>
		<!-- 卡片视图区 -->
		<el-card>
			<div class="shopping">
				<!-- 商品展示区域 -->
				<div class="orders" v-for="(item, i) in shops" :key="i">
					<div class="orderNumber">
						<div>
							<span>{{ item.orderCreateTime.split(' ')[0] }}</span>
							订单号：{{ item.ordersId }}
						</div>

						<i class="el-icon-delete-solid" @click="del(item)"></i>
					</div>
					<div class="shop">
						<div class="img">
							<img :src="imgUrl[i]" />
						</div>
						<div class="content">
							<h5>{{ item.goodsName }}</h5>
							<div class="msxx">
								<div v-for="o in item.onlyAttrs" v-if="o.checkeds">
									{{ o.attrName }}:{{ o.attrVals }}
								</div>
							</div>
							<div v-for="(t, index) in item.manyAttrs" :key="t.id">
								{{ t.attrName }}:{{ t.attrVals[item.manyAttrsIndex[index]] }}
							</div>
						</div>
						<div class="jg">
							<span>￥{{ parseFloat(item.totalPrice).toFixed(2) }}</span>
						</div>
						<div class="num">{{ item.number }}</div>
						<div class="total">
							￥{{ parseFloat(item.totalPrice * item.number).toFixed(2) }}
						</div>
						<div class="btn">
							<el-button
								type="primary"
								plain
								:disabled="item.status != 1"
								@click="complete(item)"
								>已送达</el-button
							>
							<el-button type="success" plain @click="again(item)"
								>再来一单</el-button
							>
							<el-button
							    v-if="item.ev"
								type="success"
								plain
								disabled
								>已评价</el-button
							>
							<el-button
							    v-else
								type="success"
								plain
								:disabled="item.status != 2"
								@click="openEvaluate(item)"
								>评价</el-button
							>
						</div>
						<div class="status">
							<span v-if="item.status == 0">未配送</span>
							<span v-if="item.status == 1">配送中</span>
							<span v-if="item.status == 2">已完成配送</span>
						</div>
					</div>
				</div>
			</div>
		</el-card>
		<el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			width="50%"
			:before-close="handleClose"
		>
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="物流服务评分" prop="materialFlow">
					<el-rate v-model="form.materialFlow"></el-rate>
				</el-form-item>
				<el-form-item label="卖家服务评分" prop="seller">
					<el-rate v-model="form.seller"></el-rate>
				</el-form-item>
				<el-form-item label="商品描述评价" prop="treasure">
					<el-rate v-model="form.treasure"></el-rate>
				</el-form-item>
				<el-form-item label="商品评分" prop="goodsEvaluation">
					<el-rate v-model="form.goodsEvaluation"></el-rate>
				</el-form-item>
				<el-form-item label="商品评价" prop="content">
					<el-input
						type="textarea"
						:rows="2"
						placeholder="请输入内容"
						v-model="form.content" 
					>
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="addevaluation">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'AlreadyGoodsVue',
		data() {
			return {
				shops: [],
				show: false,
				goods: {
					picture: require('@/assets/images/btj0iwro.png'),
					name: 'shfjs',
				},
				goodsId: '',
				id: 0,
				imgUrl: [],
				user: {},
				dialogVisible: false,
				form: {
					materialFlow: 0,
					seller: 0,
					treasure: 0,
					goodsEvaluation: 0,
					content: '',
					shopId: '',
					goodsId: '',
					userId:'',
					ordersId:''
				},
			}
		},
		comments() {},
		created() {
			this.processing()
		},
		methods: {
			// 退出登录
			async logout() {
				const result = await confirm('是否退出登录！')
				if (result) {
					const res = await this.$api.sort.logout()
					if (res.data.code === 1) {
						this.$message.success('退出成功！')
						this.$cookies.remove('user')
						localStorage.clear()
						this.$router.push({ path: '/' })
					} else {
						this.$message.success('退出失败！')
					}
				}
			},
			//处理数据结构
			async processing() {
				this.user = this.$cookies.get('user')
				this.form.userId=this.user.userId
				let res = await this.$api.rear_end.allOrders({ userId: this.user.userId })
				let ev = await this.$api.rear_end.getEva({ userId: this.user.userId })
				if (res.data.code == 1) {
					this.shops = res.data.data
					this.shops.forEach(async (item, index) => {
						item.ev=false
						ev.data.data.forEach(it=>{
							if(item.ordersId===it.ordersId){
								item.ev=true 
							}
						})
						item.manyAttrsIndex = item.manyAttrsIndex
							? item.manyAttrsIndex.split(' ')
							: []
						item.pics = item.pics ? item.pics.split(',') : []
						let imgUrl = await this.$api.rear_end.download(item.pics[0])
						let url = window.URL.createObjectURL(
							new Blob([imgUrl.data], { type: 'image/jpeg' })
						)
						this.imgUrl[index]=url
						item.manyAttrs.forEach((t) => {
							t.attrVals = t.attrVals ? t.attrVals.split(' ') : []
							t.addPrice = t.addPrice ? t.addPrice.split(' ') : []
							t.checkeds = t.checkeds ? t.checkeds.split(' ') : []
							t.manyPics = t.manyPics ? t.manyPics.split(' ') : []
						})
					})
				}
			},
			//删除购买商品
			async del(item) {
				var t = confirm('确认删除该商品吗？')
				if (t) {
					let data = {
						ordersId: item.ordersId,
						isDeleted: 1,
					}
					res = await this.$api.rear_end.isdel(data)
					if (res.data.code == 1) {
						this.$message.success('删除购买商品记录成功')
						this.processing();
					} else {
						this.$message.error('删除购买商品记录失败')
					}
				}
			},
			// 再次购买商品
			async again(item) {
				var t = confirm('确认购买该商品吗？')
				if (t) {
					let data = { ordersId: item.ordersId }
					let res = await this.$api.rear_end.addOrders(data)
					if (res.data.code == 1) {
						this.$message.success('购买成功')
						this.processing();
					} else {
						this.$message.error('购买失败')
					}
				}
			},
			// 修改订单配送状态
			async complete(item) {
				var t = confirm('确认商品已送达？')
				if (t) {
					let data = {
						ordersId: item.ordersId,
						status: 2,
						updateid:this.user.userId
					}
					res = await this.$api.rear_end.isdel(data)
					if (res.data.code == 1) {
						this.processing()
					}
				}
			},
			// 改变评价对话框
			handleClose() {
				this.$refs.form.resetFields()
				this.dialogVisible = false
			},
			// 添加评价
		   async addevaluation() {
			let res=await	this.$api.rear_end.saveEvca(this.form)
			if(res.data.code==1){
               this.$message.success(res.data.data)
			   this.handleClose()
			this.dialogVisible=false
			   return 
			}
			this.$message.error(res.data.msg)
			this.handleClose()
			this.dialogVisible=false
			},
			//打开评价对话框
			openEvaluate(item) {
				this.form.shopId = item.createAdminId
				this.form.goodsId = item.goodsId
				this.form.ordersId=item.ordersId
				this.dialogVisible = true
			},
		},
	}
</script>

<style lang="less" scoped>
	.head {
		.el-breadcrumb {
			float: left;
			font-size: 2rem;
		}
		.el-button {
			float: right;
		}
		padding-bottom: 10vh;
	}
	.el-card {
		.shopping {
			.orders {
				display: flex;
				flex-direction: column;
				border: 1px solid;
				border-radius: 12px;
				margin-top: 20px;
				.orderNumber {
					background-color: #f1f1f1;
					padding: 20px 30px;
					border-radius: 12px;
					display: flex;
					justify-content: space-between;
					div {
						span {
							margin-right: 30px;
						}
					}
				}
				.shop {
					display: flex;
					align-items: center;
					.img {
						width: 100px;
						height: 100px;
						margin: 20px 20px;
						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							border-radius: 8px;
						}
					}
					.content {
						width: 400px;
						margin: 20px 0;
						h5 {
							font-weight: bold;
						}
						div {
							color: #a0acc8;
						}
					}
					.jg {
						width: 100px;
						height: 100px;
					}
					.num {
						width: 100px;
						text-align: center;
						height: 100px;
					}
					.total {
						width: 140px;
						line-height: 4;
						border-left: 1px solid #eee;
						height: 140px;
						text-align: center;
						font-weight: bold;
					}
					.btn {
						display: flex;
						flex-direction: column;
						height: 140px;
						width: 200px;
						justify-content: center;
						align-items: center;
						border-left: 1px solid #eee;
						.el-button {
							width: 100px;
							margin: 5px 10px;
						}
					}
					.status {
						height: 140px;
						width: 100px;
						border-left: 1px solid #eee;
						display: flex;
						justify-content: center;
						line-height: 4;
					}
				}
			}
		}
	}
</style>